import React, { useEffect, useState } from "react";
import { Spin } from 'antd';
import SettingOutlined from '@ant-design/icons/SettingOutlined';
import { getAllGame } from '@/api/modules/common';
import NewModal from '@/components/Modal';
import DragTable from '@/components/DragTable';

import "./index.less";

interface Props {
	onSelect?: any;
    gameLoad?: any;
}

const Comp = (props: Props) => {
    const { gameLoad } = props;
    const [loading, setLoading] = useState(false);
    const [gameList, setGameList]: any = useState([]);
    const [settingModalObj, setModalObj] = useState({ open: false, hideFooter: true, title: '游戏顺序配置！' });

    const columns = [{
        title: '配置项',
        dataIndex: 'name',
        width: 180,
    }, {
        title: '显示',
        dataIndex: 'switch',
        width: 180,
    }];
    const onCancel = () => {
        setModalObj((pre) => ({ ...pre, open: false }));
    };
    const onOpen = () => {
        setModalObj((pre) => ({ ...pre, open: true }));
    };
    const fetchData = async () => {
        try {
            setLoading(true);
            const gameRes = await getAllGame();
            const newData = gameRes.data || [];
            setLoading(false);
            setGameList(newData);
            gameLoad(gameRes);
        } catch (err) {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchData();
    }, []);

    return (
        <>
            <div className="game-all">
                <div className="flex">
                    <div className="game-box all-name">
                       <div className="game active" style={{ marginBottom: '5px' }}> 全部</div> 全部
                    </div>
                    {
                        gameList.map((item: any) => {
                            return (
                                <div key={item.id} className="game-box">
                                    <div className="game" style={{ marginBottom: '5px' }}>
                                        <img src={item.icon} alt="#" />
                                    </div>
                                    <div className="game-name">{item.name}</div>
                                </div>
                            );
                        })
                    }
                    <div onClick={onOpen} className="game-box all-setting">
                        { loading ? <Spin spinning /> : <><div className="game active" style={{ marginBottom: '5px' }}> <SettingOutlined /></div><div className="game-name">游戏配置</div></> }
                    </div>
                </div>
            </div>
            <NewModal {...settingModalObj} onCancel={onCancel}>
                <DragTable
                    rowKey="id"
                    columns={columns}
                    dataSource={gameList}
                    pagination={false}
                />
            </NewModal>
        </>
    );
};

export default Comp;